<!--
 * Copyright (c) 2013-Now http://jeesite.com All rights reserved.
 * No deletion without permission, or be held responsible to law.
 * @author FIRE
-->
<template>
  <div >
    <Divider />
    <div style="display: flex;justify-content: space-between;align-items: center;padding: 0 10px 10px;">
      <h2>
        所选模板：{{moban}}
      </h2>
      <div style="display: flex;align-items: center;">
        <div style="cursor: pointer">
          <a-tooltip placement="left">
            <template #title>
              <div v-html="message"></div>
            </template>
            <div style="margin-right: 30px;" v-if="flagText">
              检查结果：
              <span style="color: green;" v-if="flag">正常</span>
              <span style="color: red;" v-if="!flag">异常</span>
            </div>
          </a-tooltip>
        </div>


        <a-button type="primary" @click="handleCheck()" >
          <Icon icon="simple-line-icons:shuffle" /> {{ t('检查数据') }}
        </a-button>
      </div>
    </div>
    
    <BasicTable @register="registerTable" >
      
      <template #firstColumn="{ record }">
        <a @click="handleForm({ code: record.code })">
          {{ record.code }}
        </a>
      </template>
    </BasicTable>
    <div style="width: 100%;display: flex;justify-content: center;margin-top: 20px;">
      <a-button type="default" @click="customResetFunc()" style="margin-right: 100px;">上一步</a-button>
      <a-button type="primary" @click="customSubmitFunc()">下一步</a-button>
    </div>
  </div>
</template>
<script lang="ts">
  export default defineComponent({
    name: 'ViewsSettingPricemodelWecharPriceModelUseStepStep3',
  });
</script>
<script lang="ts" setup>
  import { defineComponent, ref,defineProps ,onMounted,watch } from 'vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { router } from '/@/router';
  import { Icon } from '/@/components/Icon';
  import { BasicTable, BasicColumn, useTable } from '/@/components/Table';
  import { wecharPriceModelDelete, wecharPriceModelSelListData } from '/@/api/setting/pricemodel/wecharPriceModel';
  import { wecharPriceModelDisable, wecharPriceModelEnable } from '/@/api/setting/pricemodel/wecharPriceModel';
  import { wecharPriceSystemTreeData } from '/@/api/setting/pricemodel/wecharPriceSystem';
  import { wecharPriceModelInvCheck  } from '/@/api/setting/pricemodel/wecharPriceModelInv';
  import { wecharPriceModelUseCheck  } from '/@/api/setting/pricemodel/wecharPriceModelUse';
  import { useGlobSetting } from '/@/hooks/setting';
  import { downloadByUrl } from '/@/utils/file/download';
  import { useDrawer } from '/@/components/Drawer';
  import { useModal } from '/@/components/Modal';
  import { FormProps } from '/@/components/Form';
  import InputForm from './Step2Form.vue';
  import { Divider, Tooltip } from 'ant-design-vue';
  import { ListSelect } from '/@/components/ListSelect';
  // import WecharPriceModelInv from '../wecharPriceModelInv/list.vue';
  // import FormImport from './formImport.vue';
  
  const emit = defineEmits(['next', 'prev']);

  const { t } = useI18n('setting.pricemodel.wecharPriceModel');
  const { showMessage } = useMessage();
  const getTitle = {
    icon: router.currentRoute.value.meta.icon || 'ant-design:book-outlined',
    value: router.currentRoute.value.meta.title || t('价格模板管理'),
  };
  const listSelectRef = ref<any>(null);
  const selectListRef = ref<any>([]);

  async function customResetFunc() {
    emit('prev');
  }

  const props = defineProps({
    data: Array,
    dataStr:String
  });

  watch(
    () => props.dataStr,
    async (newV,oldV) => {
      console.log(newV,'newV');
      console.log(oldV,'oldV');
      console.log(props.data,'props.data');

      selIds.value = ''
      moban.value = ''
      message.value = ''
      flag.value = false
      flagText.value = false

      await props.data.forEach(item=>{
        selIds.value += item.code + ','
        moban.value +=  `(${item.code})${item.name}，`
      })
      moban.value = moban.value .slice(0, -1);
      handleSuccess()

    },
  );

  let selIds = ref('')
  let moban = ref('')
  let flag = ref(false)
  let flagText = ref(false)
  let message = ref('')
  

  onMounted(async () => {
    console.log(props.data,'props.data===');
    await props.data.forEach(item=>{
      selIds.value += item.code + ','
      moban.value +=  `(${item.code})${item.name}，`
    })
    moban.value = moban.value .slice(0, -1);
    handleSuccess()
  });



  async function customSubmitFunc() {
    if(!flag.value && !flagText.value){
      showMessage('请先检查数据！');
      return;
    }
    if(!flag.value && flagText.value){
      showMessage('检查模板异常，请重新选择检查！');
      return;
    }
    emit('next', {});
  }

  const searchForm: FormProps = {
    baseColProps: { lg: 6, md: 8 },
    labelWidth: 90,
    schemas: [
      // {
      //   label: t('模板名称'),
      //   field: 'priceModel.name',
      //   component: 'Input',
      // },
      {
        label: t('存货编码'),
        field: 'invCode',
        component: 'Input',
      },
      {
        label: t('存货名称'),
        field: 'basInv.cinvname',
        component: 'Input',
      },
      {
        label: t('协同路线'),
        field: 'croute',
        component: 'Input',
      },
      {
        label: t('备注'),
        field: 'remarks',
        component: 'Input',
      },
      {
        label: t('状态'),
        field: 'cstatus',
        component: 'Select',
        componentProps: {
          dictType: 'sys_check_status',
          allowClear: true,
          onChange: handleSuccess,
        },
      },
    ],
  };
  const tableColumns: BasicColumn[] = [
    {
      title: t('模板编号'),
      dataIndex: 'modelCode',
      key: 'a.model_code',
      sorter: true,
      width: 100,
      align: 'left',
    },
    {
      title: t('模板名称'),
      dataIndex: 'priceModel.name',
      key: 'a.model_code',
      sorter: true,
      width: 150,
      align: 'left',
    },
    {
      title: t('存货编码'),
      dataIndex: 'invCode',
      key: 'a.inv_code',
      sorter: true,
      width: 100,
      align: 'left',
    },
    {
      title: t('存货名称'),
      dataIndex: 'basInv.cinvname',
      key: 'a.inv_code',
      sorter: true,
      width: 150,
      align: 'left',
    },
    {
      title: t('协同路线'),
      dataIndex: 'croute',
      key: 'a.croute',
      sorter: true,
      width: 100,
      align: 'left',
    },
    
    {
      title: t('协同单价'),
      dataIndex: 'routePrice',
      key: 'a.route_price',
      sorter: true,
      width: 100,
      align: 'left',
    },
    {
      title: t('协同描述'),
      dataIndex: 'routeDesc',
      key: 'a.route_desc',
      sorter: true,
      width: 150,
      align: 'left',
    },
    {
      title: t('备注'),
      dataIndex: 'remarks',
      key: 'a.remarks',
      sorter: true,
      width: 130,
      align: 'left',
    },
    {
      title: t('检查结果'),
      dataIndex: 'checkResult',
      key: 'a.check_result',
      sorter: true,
      width: 130,
      align: 'left',
    },
    {
      title: t('状态'),
      dataIndex: 'cstatus',
      key: 'a.cstatus',
      sorter: true,
      width: 80,
      align: 'center',
      dictType: 'sys_check_status',
      fixed:'right'
    },
    
    
  ];

  const actionColumn: BasicColumn = {
    width: 100,
    actions: (record: Recordable) => [
      {
        icon: 'ant-design:table-outlined',
        // color: 'success',
        title: t('编辑价格模板子表'),
        onClick: handleTable.bind(this, record),
        auth: 'setting:pricemodel:wecharPriceModel:edit',
      },
      {
        icon: 'ant-design:delete-outlined',
        color: 'error',
        title: t('删除价格模板'),
        popConfirm: {
          title: t('是否确认删除价格模板'),
          confirm: handleDelete.bind(this, { code: record.code }),
        },
        auth: 'setting:pricemodel:wecharPriceModel:edit',
      },
    ],
  };

  async function handleCheck() {
    // flag.value = true
    try {
      const res = await wecharPriceModelUseCheck({selIds:selIds.value});
      flagText.value = true
      message.value = res.message.slice(8)
      showMessage(res.message);
      handleSuccess();
      if(res.result == 'true'){
        flag.value = true
      }else{
        flag.value = false
      }
    } catch (error: any) {
      console.log(error + '');
      let str = error + ''
      message.value = str.slice(15)
    } finally {
      flagText.value = true
    }
  }

  const [registerDrawer, { openDrawer }] = useDrawer();
  const [registerDrawer2, { openDrawer:openDrawer2 }] = useDrawer();
  const [registerTable, {reload }] = useTable({
    api: wecharPriceModelSelListData,
    beforeFetch: (params) => {
      params.selIds = selIds.value
      return params;
    },
    columns: tableColumns,
    // actionColumn: actionColumn,
    formConfig: searchForm,
    showTableSetting: false,
    useSearchForm: true,
    canResize: true,
    resizeHeightOffset:80,
    immediate:false,
    // rowKey: 'code',
    // rowSelection: {
    //   type: 'checkbox',
    // },
  });

  function handleForm(record: Recordable) {
    openDrawer(true, record);
  }

  // 表格弹窗
  function handleTable(record: Recordable) {
    openDrawer(true, record);
  }


  async function handleEnable(record: Recordable) {
    const res = await wecharPriceModelEnable(record);
    showMessage(res.message);
    handleSuccess();
  }

  async function handleDelete(record: Recordable) {
    await step2Table.deleteTableDataRecord(record);
    // const res = await wecharPriceModelDelete(record);
    // showMessage(res.message);
    // handleSuccess();
  }

 

  function handleSuccess() {
    reload();
  }

  
</script>
